<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>书籍查询</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 自定义样式 */
        body {
            padding: 20px;
            background-color: #f8f9fa;
        }
        .container {
            max-width: 1200px;
            margin: auto;
        }
        table {
            margin-top: 20px;
        }
        th, td {
            vertical-align: middle;
        }
        a {
            color: #007bff;
        }
        a:hover {
            text-decoration: none;
            color: #0056b3;
        }
    </style>
</head>
<body>
<div class="container">
    <h2 class="mb-4">书籍信息查询</h2>
    <form action="BookServlet" method="get" class="mb-4">
        <div class="input-group">
            <input type="text" name="bookName" placeholder="请输入书籍名称" class="form-control">
            <button type="submit" class="btn btn-primary">查询</button>
        </div>
    </form>

    <table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">名称</th>
            <th scope="col">出版年</th>
            <th scope="col">作者</th>
            <th scope="col">国籍</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${bookList}" var="book">
            <tr>
                <td>${book.book_id}</td>
                <td>${book.book_name}</td>
                <td>${book.book_year}</td>
                <td>${book.authors.author_name}</td>
                <td>${book.authors.author_nation}</td>
                <td>
                    <a href="editBook?bookId=${book.book_id}" class="btn btn-sm btn-warning">详细</a>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>

<!-- 引入Bootstrap JS和依赖 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>